<template>
    <div class="pages index">
      <div class="g-container" id="container">
        <img src="../../assets/banner.png" alt="banner" class="banner">
        <form action="" method="post" >
          <tab :line-width="2" custom-bar-width="60px">
            <tab-item :selected='device == "alipay"'  @on-item-click="onItemClick('alipay')">支付宝</tab-item>
            <tab-item :selected='device == "wechat"' @on-item-click="onItemClick('wechat')">微信</tab-item>
          </tab>
          <group class="nuim-cells">
            <div class="nuim-cell nuim-cell_right" @click='addTitle'>
              <div class="nuim-cell-hd">
                <label style="width: 6em;">企业名称</label>
              </div>
              <div class="nuim-cell-bd">
                <input type="text"  placeholder="请输入企业名称" maxlength="35"  v-model.trim="form.kpname" readonly >
              </div>
              <div class="nuim-cell-ft" ></div>
            </div>
            <x-input title="企业税号" v-model.trim="form.kpcode" :show-clear='showClear1' @on-focus='iptfocus("code")' @on-blur='iptblur' placeholder="请输入企业税号"></x-input>
            <x-input title="详细地址" v-model.trim="form.kpaddr" :show-clear='showClear2' @on-focus='iptfocus("addr")' @on-blur='iptblur' placeholder="请输入企业注册地址"></x-input>
            <x-input title="注册电话" v-model.trim="form.kptel" :show-clear='showClear3' @on-focus='iptfocus("tel")' @on-blur='iptblur' placeholder="请输入注册电话" :max='20' ></x-input>
            <x-input title="开户银行" v-model.trim="form.kpbank" :show-clear='showClear4' @on-focus='iptfocus("bank")' @on-blur='iptblur' placeholder="请输入开户银行"></x-input>
            <x-input title="开户账号" v-model.trim="form.kpaccount" :show-clear='showClear5' @on-focus='iptfocus("backno")' @on-blur='iptblur'  placeholder="请输入开户银行账号"></x-input>
          </group>
          <div class="nuim-btn-area">
            <input class="nuim-btn" :class="{'nuim-btn-disabled':disabled}" type="submit"  @click="clickBtn" value="下一步">
            <p class="jilu"><a href="#/list">申请记录</a></p>
          </div>
      </form>
      </div>
    </div>
</template>
<script>
import { Group ,XInput,Tab, TabItem  } from 'vux'
import qs from 'Qs'
import store from 'storejs';
export default {
  name: 'index',
  components:{
    Group, XInput,Tab, TabItem 
  },
  data () {
    return {
      open:true,
      indexMap:{},
      nofound:false,
      search:true,
      device:'alipay',
      showClear1:false,
      showClear2:false,
      showClear3:false,
      showClear4:false,
      showClear5:false,
      value:'',
      form:{
        kpname:'',
        kpcode:'',
        kpaddr:'',
        kptel:'',
        code:'',
        kpbank:'',
        kpaccount:''
      },
      counter:0
    }
  },
  created: function(){
    var infoT = store('infoT');
    console.log(infoT)
    if(infoT){
      this.form.kpname = infoT.kpname;
      this.form.kpaddr = infoT.kpaddr;
      this.form.kptel = infoT.kptel;
      this.form.kpbank = infoT.kpbank;
      this.form.kpaccount = infoT.kpaccount;
      this.form.kpcode = infoT.kpcode;
      this.form.code = infoT.code;
    }

    var device = store('device');
    console.log(device)
    if(device){
      this.device = device;
    }
    // this.$http.get(server.share().getKpinvoiceByCode,{params:{kpdm: this.title.taxCode}}).then((response) => {
    //   var datas = response.data;
    //   if(datas){
    //     this.title.kpname = datas.split('</>')[0];
    //     this.title.kpcode = datas.split('</>')[1];
    //   }
    // }, (response) => {
      
    // });
  },
  computed:{
		disabled(){
			return  !this.form.kpname!='' ?true:false;
		}
  },
  methods:{
    addTitle:function(){
      this.$router.push({path:'/addTitle'});
    },
    onItemClick:function(val){
      console.log(val);
      this.device = val;
      store('device',this.device);
    },
    iptfocus(a){
      var that = this
      setTimeout(function() {
        
        switch (a) {
          case "code":
            that.showClear1 = true
            break;
          case "addr":
            that.showClear2 = true
            break;
          case "tel":
            that.showClear3 = true
            break;
          case "bank":
            that.showClear4 = true
            break;
          case "backno":
            that.showClear5 = true
            break;
          default:
            break;
        }
      }, 2);
        console.log(a);
    },
    iptblur(){
      console.log('blur');
      var that = this
      setTimeout(function() {
        that.showClear1 = false
        that.showClear2 = false
        that.showClear3 = false
        that.showClear4 = false
        that.showClear5 = false
      }, 1);
     
    },
    clickBtn:function(){
      if(!this.disabled){
        var regtax = /^[a-zA-Z0-9]{15,20}$/;
        if(!regtax.test(this.form.kpcode)){
          event.preventDefault();
          this.$vux.toast.show({
            type:'text',
            width:'70%',
            text: '请填写正确的企业税号'
          });
          return false;
        }else if(20 >= this.form.kptel.length && this.form.kptel.length < 6){
          event.preventDefault();
          // alert(1)
          this.$vux.toast.show({
            type:'text',
            width:'70%',
            text: '请填写正确的电话'
          });
          return false;
        }else if(60 >= this.form.kpaddr.length && this.form.kpaddr.length < 5 ){
          event.preventDefault();
          // alert(1)
          this.$vux.toast.show({
            type:'text',
            width:'70%',
            text: '请填写完整的地址信息'
          });
          return false;
        }else if(40 >= this.form.kpbank.length && this.form.kpbank.length < 1 ){
          event.preventDefault();
          // alert(1)
          this.$vux.toast.show({
            type:'text',
            width:'70%',
            text: '请填写正确的开户行'
          });
          return false;
        }else if(25 >= this.form.kpaccount.length && this.form.kpaccount.length < 6 ){
          event.preventDefault();
          // alert(1)
          this.$vux.toast.show({
            type:'text',
            width:'70%',
            text: '请填写正确的银行账号'
          });
          return false;
        }else{
          // console.log(1);
          var jskpData = [{kpname:this.form.kpname,kpcode:this.form.kpcode,kpaddr:this.form.kpaddr,kptel:this.form.kptel,code:this.form.code,kpbank:this.form.kpbank,kpaccount:this.form.kpaccount}];
          //store({'jskp':jskpData });
          this.$router.push({path:'/apply/'});
        }
      }else{
        this.$vux.toast.show({
          type:'text',
          width:'70%',
          text: '请填写抬头名称'
        });
      }
    }
  }
}
</script>
<style lang="less">
  .vux-no-group-title{
    &:before{
      display: none!important;
    }
  }
</style>

<style scoped lang="less">
.index{ 
  height: 100%; 
  color: #4a4a4a;
  .banner{
    width: 100%;
    vertical-align: bottom;
    margin-bottom: 10px;
  }
  .weui-cells{
    font-size: 16px!important;
  }
  .arrowRight{
    border-left: 1px solid #c8c8cd;
    height: 20px;
    width: 10px;
  }
  .weui-media-paddiing15 {
    padding: 15px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    .weui-media-box__hd{
      margin-right: 11px;
      width: 60px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      img{
        width: 100%;
        max-height: 100%;
        vertical-align: top;
      }
    }
    .taxCode {
      position: absolute;
      right: 10px;
      color: #bebebe;
      font-size: 12px;
      bottom: 25px;
    }
    .weui-media-box__bd {
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      flex: 1;
      min-width: 0;
      font-size: .875rem;
      .weui-media-box__title {
        font-weight: 400;
        font-size: 14px;
        color: #4a4a4a;
        line-height: 22px;
        width: auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: normal;
        word-wrap: break-word;
        word-break: break-all;
      }
      .weui-media-box__desc{
        color: #999;
        font-size: 12px;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
    }
  } 
  .weui-cells_title{
    padding: .5em 15px;
    margin: 0;
    color: #999999;
    font-size: 14px;
  }
  .nuim-cell-last{
    .nuim-cell-bd {
      width: 48%;
      display: inline-block;
      height: 42px;
    }
    .kpcode{
      font-size: 14px;
      line-height: 28px;
    }
    div, #shareLink {
      text-align: center;
      color: #bebebe;
    }
    div{
      &:last-child {
        border-left: 1px solid #c8c8cd;
        p{
          padding-top: 6px;
        }
      }
    }
    p {
      font-size: 12px;
    }
  } 
  .jilu{
    font-size: 16px;
    color: #119EDD;
    line-height: 40px;
    margin-top: 15px;
    a{
      color: #119EDD;
    }
  }
  .nuim-btn{
    outline: 0 none;
    border: 0 none;
    width: 100%; 
  }
}
.remarks{
  margin-top: 10px;
}
.titleInput{
  i{
    color: #4a90e2;
  }
  &::after{
    content: none;
  }
}
</style>
